<template>
	<view style="display: flex;justify-content: flex-start;height: 100%;">
		<scroll-view scroll-y="true" style="width: 200rpx;height: 100%;background-color: #f7f7f7;margin-right: 20rpx;">
			<view @click="toindex=index" :class="index==toindex?'scroll_item tt':'scroll_item'"
				v-for="(item,index) in list">{{item}}</view>
		</scroll-view>
		<view style="padding: 20rpx 0;">
			<u-grid col="3" style="width: 100%;">
				<u-grid-item v-for="item in list">
					<view style="display: flex;flex-direction: column;align-items: center;margin: 30rpx 0;">
						<image src="../../static/logo.png" mode="aspectFill" style="width: 80rpx;height: 80rpx;">
						</image>
						<text>{{item}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['手机', '电脑', '箱包', '废纸', '衣物', '大家电', '五金'],
				toindex: 0
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.scroll_item {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tt {
		background-color: #ffffff;
		border-right: 10rpx #0055ff solid;
	}
</style>
